import Sortable from 'sortablejs'
import { ref } from 'vue'
import { useToast } from 'vue-toastification'
import store from '~/store'

const toast = useToast()
export const tableRef = ref(null)

export const initSortable = (tableData, cb) => {
  // 2022年之前通过下面的类名获取行集合的容器
  // const el = tableRef.value.$el.querySelectorAll(
  //   '.el-table__body-wrapper > table > tbody'
  // )[0]
  // 2023年3月24日之后使用下面的类名获取行集合容器
  const el = tableRef.value.$el.querySelectorAll(
    '.el-table__body tbody'
  )[0]

  Sortable.create(el,{
    ghostClass: 'sortable-ghost',// 拖拽时的类名
    onEnd(event){ // 拖拽结束的回调方法
      const { newIndex, oldIndex } = event
      const obj = tableData.value[oldIndex]

      let tmpData = [...tableData.value]
      tmpData.splice(newIndex, 0, obj)
      if(newIndex > oldIndex)
        tmpData.splice(oldIndex, 1)
      else
        tmpData.splice(oldIndex + 1, 1)

      tmpData = resetSeq(tmpData)

      // 请求后台修改排序字段 seq
      store.dispatch('system/updateTableStyle', tmpData).then(res => {
        if(res.code !== 1) return
        // 注意下面的置空不可放到业务组件的获取表格数据的异步方法中
        // 否则出现 BUG
        tableData.value = []
        cb && cb()
      })
    }
  })
}

const resetSeq = (tableData) => {
  let i=0
  for (const item of tableData) {
    i++
    item.seq = i
  }
  return tableData
}
